import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { List, Toast, Modal } from 'antd-mobile';
import './OrderPay.less';

import * as common from 'common/common.js';

import * as orderApi from 'common/api/OrderApi.js';
import * as userApi from 'common/api/UserApi.js';
import SeperateLine from 'common/components/SeperateLine.js';
import Header from 'common/components/Header.js';

const Item = List.Item;

/**
 * 订单支付页面
 */
class OrderPay extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	orderDetail: {
	    		orderPayMoney: 0.00
	    	},
	    	userInfo: {
    			balance: 0.00
			},
			modalFlag: false
	    }
	}
	
	componentDidMount(){
		const { orderId } = this.props.params;
		//订单详情
		Toast.loading("", common.TIPS_LOADING_DURATION);
		orderApi.orderDetail({
			orderId: orderId,
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					orderDetail: result.data
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
		//会员信息
		userApi.userInfo({
			memberId:common.userId()
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					userInfo: result.data
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}

	closePay = () => {
		if(this.props.params.from == "orderPreview"){
			hashHistory.replace("/userInfo");
		}else{
			window.history.back()
		}
	}

	balancePay = () => {
		const { userInfo, orderDetail } = this.state;
		this.setState({
			modalFlag: false,
		});
		//验证余额
		if(userInfo.balance > orderDetail.orderPayMoney){
			userApi.balancePay({
				orderId: this.props.params.orderId
			}).then(result => {
				Toast.hide();
				if(result.code == common.SUCCESS){
					Toast.info("支付成功!",  common.TIPS_INFO_DURATION);
					setTimeout(function(){
						common.goBack();
					}, 1500);
				}else{
					Toast.info(result.msg, common.TIPS_INFO_DURATION);
				}
			})
		}else{
			Toast.info("余额不足", common.TIPS_INFO_DURATION);
		}
	}

	//显示确认支付提示框
	showPayConfirmDialog = () => {
		this.setState({
	      modalFlag: true,
	  });
	}

	//关闭确认支付提示框
	hidePayConfirmDialog = () => {
		this.setState({
	      modalFlag: false,
	  });
	}
	
	render(){
		const { orderDetail, userInfo, modalFlag } = this.state;
		return(
			<div className="orderPay">
				{/* 确认支付弹框 */}
				<Modal
					className="modal"
					title="确定支付?"
					transparent
					maskClosable={true}
					platform="ios"
					visible={modalFlag}
					onClose={this.hidePayConfirmDialog.bind(this)}
					footer={[{ text: '确定', onPress: this.balancePay.bind(this)}, { text: '取消', onPress: this.hidePayConfirmDialog.bind(this)}]}
					>
				</Modal>
				<Header title={"支付"} hasBack="true" back={()=>this.closePay()}></Header>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				<List className="my_list">
		        	<Item extra={common.fenToYuan(orderDetail.orderPayMoney)+" 元"}>订单金额</Item>
		      	</List>
		      	<SeperateLine lineHeight={"0.1rem"} bg={"#eee"}></SeperateLine>
		      	<List className="my_list">
		      		<Item onClick={()=>this.showPayConfirmDialog()} extra={<div className="pay_type"><span>{common.fenToYuan(userInfo.balance)} 元</span><img src="assets/img/right.png"/></div>}>
		      			<img className="pay_img" src="assets/img/wallet.png"/>
		        		<span>余额</span>
		        	</Item>
		        	<Item extra={<div className="pay_type"><img src="assets/img/right.png"/></div>}>
		        		<img className="pay_img" src="assets/img/weixin_bg.png"/>
		        		<span>微信</span>
		        	</Item>
		        	<Item extra={<div className="pay_type"><img src="assets/img/right.png"/></div>}>
		        		<img className="pay_img" src="assets/img/zfb.png"/>
		        		<span>支付宝</span>
		        	</Item>
		      	</List>
			</div>
		)
	}
}

export default OrderPay;